프로그래밍 공부 일기 【Vue + Vuetify】 v-navigation-drawer를 고정 표시 그대로 링크 천이시키는 방법 여러분 안녕 안녕하세요. 엔지니어 경력 1년째, 현장 미경험의 약소 자칭 Web 엔지니어입니다. 이번에는 트위터 PC 버전처럼 사이드 네비게이션 바를 표시 한 채로 화면 전환 시행착오한 경위를 기록하려고 생각해 본 기사의 작성에 있던 나름입니다. 링크를 클릭하여 페이지를 전환해도 항상 왼쪽 서랍이 표시됩니다. 먼저 결론에서 언급하면 루트의 설정을 중첩 구조로 하면 무사히 해결했습니다. 특히 ... vue-router프로그래밍 공부 일기Vue.jsVuetify Node.js에서 submit 버튼을 Font Awesome으로 만드는 방법 2020년 9월 21일 Node.js의 ejs 파일로 form로 데이터를 보낼 때 Font Awesome을 사용하려고 할 때 시행 착오했기 때문에 비망록으로 써 둔다. 현재는 이하와 같이 「삭제」버튼으로 되어 있다. 현재 이를 다음과 같이 Font Awesome을 사용하여 아이콘으로 만들고 싶습니다. 해결 방법 개인적으로는 아이콘 주위의 선(버튼의 부분)을 지우고 싶지만, 잘 할 수 없기 때... 초보자FontAwesome프로그래밍 공부 일기Node.js Fontawesome의 display : none이 작동하지 않습니다. 2020년 7월 6일 Progate Lv.148 포트폴리오 작성 중 display:none 가 효과가 없는 원인을 조사해 보았다. 예기치 않게 display:block와 같이 display 속성이 사용됩니다 Fontawesome의로드가 CSS를로드하기 전에로드됩니다. 선택기가 잘못되었습니다 아무도 확인해 보았지만 해결하지 않았다 ...dislay:none 가 효과가 없었기 때문에, 다른 방법... CSS프로그래밍 공부 일기FontAwesome Rails에서 kaminari 사용 2020년 7월 31일 Progate Lv.226 로 취급한 gem의 카미나리를 설명한다. kaminari는 한 페이지에 게재하는 콘텐츠가 늘어날 때 여러 페이지로 나누어 표시시키는 페이지네이션을 간단하게 구현할 수 있다. 페이지네이션을 사용하는 것으로, 정보량이 많은 사이트를 정리할 수 있다는 것 뿐만이 아니라, 표시되는 항목이 일정수를 넘으면 자동적으로 다음의 페이지로 내용을 이행할 수도... 젬초보자Rails프로그래밍 공부 일기 【HTML】 HTML만으로 입력을 확인하는 방법 스크립트를 사용하지 않고 입력 체크하는 방법을 처음 알았으므로 정리한다. input 요소에 속성치 required를 사용하면 그 입력란은 입력 필수 항목이 되어, 공란인 채로 송신 버튼이 눌려져도 경고 메세지가 나온다. ※ chrome에서는 이렇게 실행되고 있지만, required 속성에 비대응의 낡은 브라우저에서는 경고 메세지가 나오지 않고 그대로 송신되어 버리는 일이 있으므로 주의한다. ... HTML초보자프로그래밍 공부 일기정규식 500 Internal Server Error란 무엇인가? 2020년 12월 19일 검증 도구에서 500 Internal Server Error가 표시되어 제대로 표시되지 않는 상황에 빠졌기 때문에 500 Internal Server Error의 의미와 해결 방법을 간략하게 소개한다. 간단히 말하면, 서버측에 문제가 있을 때 표시되는 에러이다. 프로그램 자체에의 액세스는 할 수 있지만, 실행을 할 수 없다·처리가 완료하지 않는 경우에 발생하는 에러로... 초보자자바스크립트아약스프로그래밍 공부 일기 【Android】Image Asset Studio에서 앱 아이콘을 만드는 방법 2020년 12월 18일 Android Studio에서 아이콘을 만들 수 있다는 것을 알았으므로 그 방법을 정리합니다. 아이콘 타입(Icon Type)은 Launcher Icons (Adaptive and Legacy)를 선택한다. 텍스트의 색과 폰트를 변경하는 옵션이 있으므로 자유롭게 변경한다. 次へ(Next) 를 누르면 파일 작성 미리보기를 볼 수 있습니다. 完了(Finish) 파일이 생... 안드로이드초보자프로그래밍 공부 일기 【Android】LinearLayout 사용법 2020년 12월 16일 LinearLayout을 시작해서 사용했으므로, LinearLayout이란 무엇인가 사용법을 간단히 정리한다. LinearLayout(읽는 방법: 「리니어 레이아웃」)은, 간단한 레이아웃의 하나로, 아이 요소를 세로·가로의 일렬로 늘어놓는 레이아웃이다. android:orientation 속성에 vertical , horizontal app/src/main/res/l... 안드로이드초보자AndroidStudio프로그래밍 공부 일기 【Android】ConstraintLayout 제약 오류 2020년 12월 15일 Android Studio에서 ConstraintLayout의 제약을 설정하는 오류가 나왔으므로 이 오류 내용과 해결 방법을 보여준다. 버튼이나 텍스트 등의 뷰에 대해서 수평 방향이나 수직 방향의 제약의 정의를 하지 않으면 좌상의 0.0의 위치에 배치되는 에러이다. 에러를 해결하기 위해서는, 여러가지 방법이 있어, 간단하게 몇개인가 소개한다. 뷰를 화면에 배치하고 I... 안드로이드초보자프로그래밍 공부 일기 PowerShell 배경 변경 2020년 12월 12일 쭉 PowerShell의 배경색이 마음에 들지 않았지만, PowerShell을 사용할 기회가 대단히 늘어났기 때문에, 이 기회에 배경의 색을 바꾸려고 했다. 어쩐지 귀찮은 것 같은 이미지는 있었지만, 간단했기 때문에 디폴트로 사용하고 있는 사람은 꼭 시험해 보길 바란다. PowerShell의 타이틀 바를 마우스 오른쪽 버튼으로 클릭하고 プロパティ를 선택합니다. 속성을... 초보자WindowsPowerShell프로그래밍 공부 일기 【Android】액티비티의 라이프 사이클 이벤트에 대해서 2020년 12월 9일 Android 앱을 만들 때 이해해야 할 액티비티의 라이프사이클을 간략하게 정리합니다. 아래 그림은 기본적인 Activity의 라이프 사이클을 나타내고, 라이프 사이클이 변화하는 타이밍에서 호출되는 Activity의 메소드를 나타내고 있다. 참고 문헌 : 라이프사이클은 직접 앱이 제어하고 있지 않다. 메모리가 꽉 찼을 때 시스템이 마음대로 앱을 멈출 수 있다. 액티비티... 안드로이드초보자프로그래밍 공부 일기 【React】초초보자:폼의 작성편 여러분 처음 뵙겠습니다. 교육에서 Vue를 사용하여 개발했습니다. 다른 JS 프레임워크도 만져보고 싶어지고, 이 기사의 작성에 이르렀던 대로입니다. · Vue를 사용하여 개발 한 적이있다. · Progate에서 React IV까지 학습됨 개발 환경 · MacOS Catalina 버전 10.15.7 · Node.js v12.18.4 · Npm 6.14.6 React 의 사용법을 배우는데 있어서... 양식프로그래밍 공부 일기초보자React 【JavaScript】 요소에 지정한 CSS 스타일을 취득하고 싶다! 2020년 11월 15일 닷 설치로 JavaScript를 학습하는 동안 문득, 「CSS의 스타일은 어떻게 취득하는 것인가? 』라고 신경이 쓰였습니다. 자신적으로는, 다소 어려웠기 때문에 향후 실수하지 않도록 기록해 갑니다. CSS 파일에 기술한 background 프로퍼티의 값을 취득하고 싶습니다. index.html style.css 우선 최종적으로 취득할 수 있었던 코드가 이하가 됩니다.... HTML프로그래밍 공부 일기자바스크립트프로그래밍 초보자CSS 【HTML】table 태그의 장점과 단점 2020년 11월 14일 평소에는 table 태그를 아무렇지도 않게 사용했지만, 단점도 있다는 것을 알고 다시 table 태그의 사용법을 정리한다. table 태그는 이름대로 테이블(표)을 작성하는 태그. 테이블의 기본 구조는 <table></table> 안에 <tr></tr> 로 테이블의 한 행을 정의하고, 그 안에 <td></td> 로 셀을 정의한다. 표의 각 셀에는 표제를 정의하는 헤더... HTML초보자테이블프로그래밍 공부 일기 【JavaScript】 풀다운 메뉴 작성 항목을 선택하면 다른 페이지로 이동하는 풀다운 메뉴를 만들었습니다. html 파일은 일본어용, 영어용, 중국어용의 3개 준비합니다. 각 html 파일의 option 태그에 selected 속성을 사용하지 않고 만들었습니다. index.html document.getElementById('form').select 는 id 속성이 form인 요소를 가져오고 form 요소 내에서 name 속성이 ... 프로그래밍 공부 일기자바스크립트프로그래밍프로그래밍 초보자 【CSS】transform 프로퍼티로 화상이나 문자를 회전시키는 방법 변환 함수(변형 함수)라 불리는 특별한 값을 지정함으로써 대상 요소를 3차원으로 변형시킬 수 있다. transform 속성의 값에 rotate 라고 하는 변환 함수를 사용해 각도를 지정하면 지정한 각도로 문자나 이미지 등 HTML의 요소를 통째로 회전할 수 있다. 또, 2D의 평면 공간뿐만 아니라 X축·Y축·Z축을 기준으로 한 3D 공간에서의 회전도 할 수 있다. 요소를 변형하지 않음 행렬식... HTMLCSS초보자프로그래밍 공부 일기 【HTML】n승 등의 첨자를 HTML로 나타내는 방법 2020년 10월 27일10cm^2 라고 하는 표기보다 1cm² 라고 하는 위첨자로 표시하는 편을 알기 쉽기 때문에, 그 방법을 간단히 정리한다. superscript(오른쪽 어깨·위첨자)의 약자인 <sup> 태그를 사용한다. 다만, sup 요소는 특정의 의미를 가지는 표기 방법을 위해서 사용하는 요소로, 단순히 문자가 위첨이 된다고 하는 표시의 목적으로서 사용하면 안 된다. 사용법은 다음과... HTML초보자프로그래밍 공부 일기 【JavaScript】 이미지를 무작위로 표시하는 방법 2020년 10월 26일 몇 장의 사진으로부터 JavaScript를 사용해 랜덤에 1개 표시시키는 방법을 소개한다. 표시 후보의 화상 파일 리스트를 사전에 준비해 두고, 난수를 사용해 1개를 선택해 표시시킨다. 구체적인 절차 1. 표시할 가능성이 있는 이미지 파일명을 모두 배열에 넣는다 2. 그 중에서 액세스될 때마다 난수를 사용하여 1장 선택 3. 선택한 이미지 하나를 표시 자바스크립트 H... 초보자자바스크립트프로그래밍 공부 일기 【HTML】404 페이지를 만드는 방법 2020년 10월 24일 404페이지를 커스터마이즈하는 방법을 처음 알았으므로 정리한다. 먼저 404 페이지에 대해 설명한다. 삭제 된 페이지에 액세스 할 때 잘못된 URL을 입력하면 404 페이지는 상기와 같이 존재하지 않는 페이지에 유저가 링크했을 때에 표시되는 에러 페이지이다. 서버에 액세스했을 때의 표시가 404에서 처리되므로, 404 페이지라고 부른다. Google 예제 GitHub... HTML초보자프로그래밍 공부 일기 【HTML】 셀렉트 박스를 사용해 보았다 2020년 10월 21일 지금까지 HTML을 공부해 왔지만, 셀렉트 박스를 사용한 적이 없었기 때문에 사용법을 정리한다. select 요소로 셀렉트 박스를 작성할 수 있다. 메뉴의 선택은 select 요소 내에 배치하는 option 요소로 작성한다. select 요소는 name 속성에는 부품의 이름을 지정하고 size 속성으로 표시행수를 지정한다(초기값은 1), multiple 속성은 복수 ... HTML셀렉트 박스초보자프로그래밍 공부 일기 【HTML&CSS】스크롤 바의 표시를 전환한다 2020년 10월 19일 overflow의 사용법을 이해하지 않았기 때문에 정리한다. 요소의 영역에 맞지 않을 때 표시 방법을 결정하는 속성. 이 요소를 블록 정형 컨텍스트라고 하며, div 요소가 거기에 해당한다. overflow는 가로 방향을 지정한다 overflow-x 와 세로 방향을 지정한다 overflow-y , 양쪽을 지정한다 overfloe 가 있다. 설정치는 표와 같다. 설정값... HTMLCSS초보자프로그래밍 공부 일기 【HTML&CSS】응답으로 개행의 위치를 바꾸는 방법 2020년 10월 17일 반응형으로 사이트를 만들 때 PC에서 볼 때와 스마트 폰으로 볼 때 개행 위치를 바꾸고 싶을 때 미디어 쿼리를 사용하여 해결하는 방법을 알았으므로 정리한다. 우선, 브레이크 포인트를 680px로 했을 때, 680px 이하일 때는 .pc는 숨기고, .sp는 표시한다. 반대로 680px 이상일 때는 .pc 는 표시로, .sp 는 숨긴다. css 이것을 개업한다 br 의 ... HTMLCSS초보자프로그래밍 공부 일기 【HTML】button 태그로 링크를 붙이는 방법 2020년 10월 16일 HTML로 코드를 작성할 때 button 태그로 링크를 포함하고 싶었으므로 그 방법을 비망록으로 정리한다. button 태그는 클릭할 수 있는 버튼을 만드는 것으로, 기본적인 쓰는 방법은 이하와 같다. 기본 쓰기 button 태그를 사용해 링크를 붙이는 경우 onclick 속성을 이하와 같이 추가한다. 버튼 태그로 링크를 붙이는 방법 구체적인 예 HTML 파일 CSS... HTMLCSS초보자프로그래밍 공부 일기 HTML의 fieldset 요소 정보 2020년 10월 14일 HTML의 fieldset 요소를 처음 알았으므로 정리한다. 입력 태그와 같은 여러 개의 입력 항목을 결합 할 수 있습니다. 웹 양식의 라벨 (<label>)과 같은 여러 컨트롤을 그룹화하는 데 사용됩니다. 그래서, 복수의 input 태그 등을 항목으로서 그룹화하기 위한 요소이다. 그룹화 된 내부의 모든 입력 장치가 비활성화됩니다. <form> 요소의 id 속성을 지... HTML초보자프로그래밍 공부 일기 HTML에서 캔버스를 사용하면 도형을 그릴 수 있습니다. 2020년 10월 8일 HTML로 이미지로 바꾸지 않고 도형을 그릴 수 있다는 것을 알았으므로 정리한다. 도형을 그리기 위해서는 png나 jpeg 등의 이미지로 바꾸거나 Flash 등의 플러그인 데이터를 임베드하는 것이 일반적이었지만, HTML5에서 2D 그래픽을 그리는 <canvas> . canvas를 사용함으로써 표준 HTML과 JavaScript만으로 그래프나 게임 그래픽 등의 도형을 ... HTML초보자자바스크립트프로그래밍 공부 일기 【비망록】Windows에서 Node.js를 업데이트하는 방법 2020년 10월 6일 Node.js 버전을 업데이트 할 때 조금 막혔으므로 비망록으로 기록합니다. Windows에서는 n을 사용할 수 없으므로 이번에는 nodist를 사용하여 Node.js를 업데이트했습니다. 명령 프롬프트에서 nodist -v를 실행하여 nodit을 사용할 수 있는지 확인합니다. 사용할 수 없으면 설치하십시오. 다음과 같이 되어 있으면 설치는 되어 있다. 명령 프롬프트 에... npm프로그래밍 공부 일기초보자Node.jsnodist HTML의 dfn 요소 정보 2020년 10월 5일 오늘은 dfn 요소를 알았으므로 정리한다. dfn은 definition이라는 의미로 정의되는 용어를 나타낸다. 용어의 의미를 설명 할 때 용어의 부분에 사용됩니다. 용어나 약어를 정의하기 위해서 준비되어 있고, dfn 태그와 abbr 태그, title 속성을 이용함으로써, 단어의 설명과 약어의 설명문을 정의할 수 있다. (abbr 태그에 대해서는 에서 소개하고 있다) ... HTML초보자프로그래밍 공부 일기 HTML로 약어, 이름, 주소를 작성하는 방법 2020년 10월 4일<abbr> 는 약어 요소를 나타내는 것은 알고 있었지만, 그 이외의 주소나 이름의 표현을 몰랐기 때문에 이번에 정리한다. 약어는 <abbr> 속성(abbreviation)을 사용하여 나타낸다. 주로 title 태그와 함께 사용되어 abbr 태그로 둘러싸인 부분이 약어임을 나타낸다. abbr 태그로 둘러싸인 곳에 커서를 맞추면 title 태그로 입력한 것이 표시된다. (... HTML초보자프로그래밍 공부 일기
【Vue + Vuetify】 v-navigation-drawer를 고정 표시 그대로 링크 천이시키는 방법 여러분 안녕 안녕하세요. 엔지니어 경력 1년째, 현장 미경험의 약소 자칭 Web 엔지니어입니다. 이번에는 트위터 PC 버전처럼 사이드 네비게이션 바를 표시 한 채로 화면 전환 시행착오한 경위를 기록하려고 생각해 본 기사의 작성에 있던 나름입니다. 링크를 클릭하여 페이지를 전환해도 항상 왼쪽 서랍이 표시됩니다. 먼저 결론에서 언급하면 루트의 설정을 중첩 구조로 하면 무사히 해결했습니다. 특히 ... vue-router프로그래밍 공부 일기Vue.jsVuetify Node.js에서 submit 버튼을 Font Awesome으로 만드는 방법 2020년 9월 21일 Node.js의 ejs 파일로 form로 데이터를 보낼 때 Font Awesome을 사용하려고 할 때 시행 착오했기 때문에 비망록으로 써 둔다. 현재는 이하와 같이 「삭제」버튼으로 되어 있다. 현재 이를 다음과 같이 Font Awesome을 사용하여 아이콘으로 만들고 싶습니다. 해결 방법 개인적으로는 아이콘 주위의 선(버튼의 부분)을 지우고 싶지만, 잘 할 수 없기 때... 초보자FontAwesome프로그래밍 공부 일기Node.js Fontawesome의 display : none이 작동하지 않습니다. 2020년 7월 6일 Progate Lv.148 포트폴리오 작성 중 display:none 가 효과가 없는 원인을 조사해 보았다. 예기치 않게 display:block와 같이 display 속성이 사용됩니다 Fontawesome의로드가 CSS를로드하기 전에로드됩니다. 선택기가 잘못되었습니다 아무도 확인해 보았지만 해결하지 않았다 ...dislay:none 가 효과가 없었기 때문에, 다른 방법... CSS프로그래밍 공부 일기FontAwesome Rails에서 kaminari 사용 2020년 7월 31일 Progate Lv.226 로 취급한 gem의 카미나리를 설명한다. kaminari는 한 페이지에 게재하는 콘텐츠가 늘어날 때 여러 페이지로 나누어 표시시키는 페이지네이션을 간단하게 구현할 수 있다. 페이지네이션을 사용하는 것으로, 정보량이 많은 사이트를 정리할 수 있다는 것 뿐만이 아니라, 표시되는 항목이 일정수를 넘으면 자동적으로 다음의 페이지로 내용을 이행할 수도... 젬초보자Rails프로그래밍 공부 일기 【HTML】 HTML만으로 입력을 확인하는 방법 스크립트를 사용하지 않고 입력 체크하는 방법을 처음 알았으므로 정리한다. input 요소에 속성치 required를 사용하면 그 입력란은 입력 필수 항목이 되어, 공란인 채로 송신 버튼이 눌려져도 경고 메세지가 나온다. ※ chrome에서는 이렇게 실행되고 있지만, required 속성에 비대응의 낡은 브라우저에서는 경고 메세지가 나오지 않고 그대로 송신되어 버리는 일이 있으므로 주의한다. ... HTML초보자프로그래밍 공부 일기정규식 500 Internal Server Error란 무엇인가? 2020년 12월 19일 검증 도구에서 500 Internal Server Error가 표시되어 제대로 표시되지 않는 상황에 빠졌기 때문에 500 Internal Server Error의 의미와 해결 방법을 간략하게 소개한다. 간단히 말하면, 서버측에 문제가 있을 때 표시되는 에러이다. 프로그램 자체에의 액세스는 할 수 있지만, 실행을 할 수 없다·처리가 완료하지 않는 경우에 발생하는 에러로... 초보자자바스크립트아약스프로그래밍 공부 일기 【Android】Image Asset Studio에서 앱 아이콘을 만드는 방법 2020년 12월 18일 Android Studio에서 아이콘을 만들 수 있다는 것을 알았으므로 그 방법을 정리합니다. 아이콘 타입(Icon Type)은 Launcher Icons (Adaptive and Legacy)를 선택한다. 텍스트의 색과 폰트를 변경하는 옵션이 있으므로 자유롭게 변경한다. 次へ(Next) 를 누르면 파일 작성 미리보기를 볼 수 있습니다. 完了(Finish) 파일이 생... 안드로이드초보자프로그래밍 공부 일기 【Android】LinearLayout 사용법 2020년 12월 16일 LinearLayout을 시작해서 사용했으므로, LinearLayout이란 무엇인가 사용법을 간단히 정리한다. LinearLayout(읽는 방법: 「리니어 레이아웃」)은, 간단한 레이아웃의 하나로, 아이 요소를 세로·가로의 일렬로 늘어놓는 레이아웃이다. android:orientation 속성에 vertical , horizontal app/src/main/res/l... 안드로이드초보자AndroidStudio프로그래밍 공부 일기 【Android】ConstraintLayout 제약 오류 2020년 12월 15일 Android Studio에서 ConstraintLayout의 제약을 설정하는 오류가 나왔으므로 이 오류 내용과 해결 방법을 보여준다. 버튼이나 텍스트 등의 뷰에 대해서 수평 방향이나 수직 방향의 제약의 정의를 하지 않으면 좌상의 0.0의 위치에 배치되는 에러이다. 에러를 해결하기 위해서는, 여러가지 방법이 있어, 간단하게 몇개인가 소개한다. 뷰를 화면에 배치하고 I... 안드로이드초보자프로그래밍 공부 일기 PowerShell 배경 변경 2020년 12월 12일 쭉 PowerShell의 배경색이 마음에 들지 않았지만, PowerShell을 사용할 기회가 대단히 늘어났기 때문에, 이 기회에 배경의 색을 바꾸려고 했다. 어쩐지 귀찮은 것 같은 이미지는 있었지만, 간단했기 때문에 디폴트로 사용하고 있는 사람은 꼭 시험해 보길 바란다. PowerShell의 타이틀 바를 마우스 오른쪽 버튼으로 클릭하고 プロパティ를 선택합니다. 속성을... 초보자WindowsPowerShell프로그래밍 공부 일기 【Android】액티비티의 라이프 사이클 이벤트에 대해서 2020년 12월 9일 Android 앱을 만들 때 이해해야 할 액티비티의 라이프사이클을 간략하게 정리합니다. 아래 그림은 기본적인 Activity의 라이프 사이클을 나타내고, 라이프 사이클이 변화하는 타이밍에서 호출되는 Activity의 메소드를 나타내고 있다. 참고 문헌 : 라이프사이클은 직접 앱이 제어하고 있지 않다. 메모리가 꽉 찼을 때 시스템이 마음대로 앱을 멈출 수 있다. 액티비티... 안드로이드초보자프로그래밍 공부 일기 【React】초초보자:폼의 작성편 여러분 처음 뵙겠습니다. 교육에서 Vue를 사용하여 개발했습니다. 다른 JS 프레임워크도 만져보고 싶어지고, 이 기사의 작성에 이르렀던 대로입니다. · Vue를 사용하여 개발 한 적이있다. · Progate에서 React IV까지 학습됨 개발 환경 · MacOS Catalina 버전 10.15.7 · Node.js v12.18.4 · Npm 6.14.6 React 의 사용법을 배우는데 있어서... 양식프로그래밍 공부 일기초보자React 【JavaScript】 요소에 지정한 CSS 스타일을 취득하고 싶다! 2020년 11월 15일 닷 설치로 JavaScript를 학습하는 동안 문득, 「CSS의 스타일은 어떻게 취득하는 것인가? 』라고 신경이 쓰였습니다. 자신적으로는, 다소 어려웠기 때문에 향후 실수하지 않도록 기록해 갑니다. CSS 파일에 기술한 background 프로퍼티의 값을 취득하고 싶습니다. index.html style.css 우선 최종적으로 취득할 수 있었던 코드가 이하가 됩니다.... HTML프로그래밍 공부 일기자바스크립트프로그래밍 초보자CSS 【HTML】table 태그의 장점과 단점 2020년 11월 14일 평소에는 table 태그를 아무렇지도 않게 사용했지만, 단점도 있다는 것을 알고 다시 table 태그의 사용법을 정리한다. table 태그는 이름대로 테이블(표)을 작성하는 태그. 테이블의 기본 구조는 <table></table> 안에 <tr></tr> 로 테이블의 한 행을 정의하고, 그 안에 <td></td> 로 셀을 정의한다. 표의 각 셀에는 표제를 정의하는 헤더... HTML초보자테이블프로그래밍 공부 일기 【JavaScript】 풀다운 메뉴 작성 항목을 선택하면 다른 페이지로 이동하는 풀다운 메뉴를 만들었습니다. html 파일은 일본어용, 영어용, 중국어용의 3개 준비합니다. 각 html 파일의 option 태그에 selected 속성을 사용하지 않고 만들었습니다. index.html document.getElementById('form').select 는 id 속성이 form인 요소를 가져오고 form 요소 내에서 name 속성이 ... 프로그래밍 공부 일기자바스크립트프로그래밍프로그래밍 초보자 【CSS】transform 프로퍼티로 화상이나 문자를 회전시키는 방법 변환 함수(변형 함수)라 불리는 특별한 값을 지정함으로써 대상 요소를 3차원으로 변형시킬 수 있다. transform 속성의 값에 rotate 라고 하는 변환 함수를 사용해 각도를 지정하면 지정한 각도로 문자나 이미지 등 HTML의 요소를 통째로 회전할 수 있다. 또, 2D의 평면 공간뿐만 아니라 X축·Y축·Z축을 기준으로 한 3D 공간에서의 회전도 할 수 있다. 요소를 변형하지 않음 행렬식... HTMLCSS초보자프로그래밍 공부 일기 【HTML】n승 등의 첨자를 HTML로 나타내는 방법 2020년 10월 27일10cm^2 라고 하는 표기보다 1cm² 라고 하는 위첨자로 표시하는 편을 알기 쉽기 때문에, 그 방법을 간단히 정리한다. superscript(오른쪽 어깨·위첨자)의 약자인 <sup> 태그를 사용한다. 다만, sup 요소는 특정의 의미를 가지는 표기 방법을 위해서 사용하는 요소로, 단순히 문자가 위첨이 된다고 하는 표시의 목적으로서 사용하면 안 된다. 사용법은 다음과... HTML초보자프로그래밍 공부 일기 【JavaScript】 이미지를 무작위로 표시하는 방법 2020년 10월 26일 몇 장의 사진으로부터 JavaScript를 사용해 랜덤에 1개 표시시키는 방법을 소개한다. 표시 후보의 화상 파일 리스트를 사전에 준비해 두고, 난수를 사용해 1개를 선택해 표시시킨다. 구체적인 절차 1. 표시할 가능성이 있는 이미지 파일명을 모두 배열에 넣는다 2. 그 중에서 액세스될 때마다 난수를 사용하여 1장 선택 3. 선택한 이미지 하나를 표시 자바스크립트 H... 초보자자바스크립트프로그래밍 공부 일기 【HTML】404 페이지를 만드는 방법 2020년 10월 24일 404페이지를 커스터마이즈하는 방법을 처음 알았으므로 정리한다. 먼저 404 페이지에 대해 설명한다. 삭제 된 페이지에 액세스 할 때 잘못된 URL을 입력하면 404 페이지는 상기와 같이 존재하지 않는 페이지에 유저가 링크했을 때에 표시되는 에러 페이지이다. 서버에 액세스했을 때의 표시가 404에서 처리되므로, 404 페이지라고 부른다. Google 예제 GitHub... HTML초보자프로그래밍 공부 일기 【HTML】 셀렉트 박스를 사용해 보았다 2020년 10월 21일 지금까지 HTML을 공부해 왔지만, 셀렉트 박스를 사용한 적이 없었기 때문에 사용법을 정리한다. select 요소로 셀렉트 박스를 작성할 수 있다. 메뉴의 선택은 select 요소 내에 배치하는 option 요소로 작성한다. select 요소는 name 속성에는 부품의 이름을 지정하고 size 속성으로 표시행수를 지정한다(초기값은 1), multiple 속성은 복수 ... HTML셀렉트 박스초보자프로그래밍 공부 일기 【HTML&CSS】스크롤 바의 표시를 전환한다 2020년 10월 19일 overflow의 사용법을 이해하지 않았기 때문에 정리한다. 요소의 영역에 맞지 않을 때 표시 방법을 결정하는 속성. 이 요소를 블록 정형 컨텍스트라고 하며, div 요소가 거기에 해당한다. overflow는 가로 방향을 지정한다 overflow-x 와 세로 방향을 지정한다 overflow-y , 양쪽을 지정한다 overfloe 가 있다. 설정치는 표와 같다. 설정값... HTMLCSS초보자프로그래밍 공부 일기 【HTML&CSS】응답으로 개행의 위치를 바꾸는 방법 2020년 10월 17일 반응형으로 사이트를 만들 때 PC에서 볼 때와 스마트 폰으로 볼 때 개행 위치를 바꾸고 싶을 때 미디어 쿼리를 사용하여 해결하는 방법을 알았으므로 정리한다. 우선, 브레이크 포인트를 680px로 했을 때, 680px 이하일 때는 .pc는 숨기고, .sp는 표시한다. 반대로 680px 이상일 때는 .pc 는 표시로, .sp 는 숨긴다. css 이것을 개업한다 br 의 ... HTMLCSS초보자프로그래밍 공부 일기 【HTML】button 태그로 링크를 붙이는 방법 2020년 10월 16일 HTML로 코드를 작성할 때 button 태그로 링크를 포함하고 싶었으므로 그 방법을 비망록으로 정리한다. button 태그는 클릭할 수 있는 버튼을 만드는 것으로, 기본적인 쓰는 방법은 이하와 같다. 기본 쓰기 button 태그를 사용해 링크를 붙이는 경우 onclick 속성을 이하와 같이 추가한다. 버튼 태그로 링크를 붙이는 방법 구체적인 예 HTML 파일 CSS... HTMLCSS초보자프로그래밍 공부 일기 HTML의 fieldset 요소 정보 2020년 10월 14일 HTML의 fieldset 요소를 처음 알았으므로 정리한다. 입력 태그와 같은 여러 개의 입력 항목을 결합 할 수 있습니다. 웹 양식의 라벨 (<label>)과 같은 여러 컨트롤을 그룹화하는 데 사용됩니다. 그래서, 복수의 input 태그 등을 항목으로서 그룹화하기 위한 요소이다. 그룹화 된 내부의 모든 입력 장치가 비활성화됩니다. <form> 요소의 id 속성을 지... HTML초보자프로그래밍 공부 일기 HTML에서 캔버스를 사용하면 도형을 그릴 수 있습니다. 2020년 10월 8일 HTML로 이미지로 바꾸지 않고 도형을 그릴 수 있다는 것을 알았으므로 정리한다. 도형을 그리기 위해서는 png나 jpeg 등의 이미지로 바꾸거나 Flash 등의 플러그인 데이터를 임베드하는 것이 일반적이었지만, HTML5에서 2D 그래픽을 그리는 <canvas> . canvas를 사용함으로써 표준 HTML과 JavaScript만으로 그래프나 게임 그래픽 등의 도형을 ... HTML초보자자바스크립트프로그래밍 공부 일기 【비망록】Windows에서 Node.js를 업데이트하는 방법 2020년 10월 6일 Node.js 버전을 업데이트 할 때 조금 막혔으므로 비망록으로 기록합니다. Windows에서는 n을 사용할 수 없으므로 이번에는 nodist를 사용하여 Node.js를 업데이트했습니다. 명령 프롬프트에서 nodist -v를 실행하여 nodit을 사용할 수 있는지 확인합니다. 사용할 수 없으면 설치하십시오. 다음과 같이 되어 있으면 설치는 되어 있다. 명령 프롬프트 에... npm프로그래밍 공부 일기초보자Node.jsnodist HTML의 dfn 요소 정보 2020년 10월 5일 오늘은 dfn 요소를 알았으므로 정리한다. dfn은 definition이라는 의미로 정의되는 용어를 나타낸다. 용어의 의미를 설명 할 때 용어의 부분에 사용됩니다. 용어나 약어를 정의하기 위해서 준비되어 있고, dfn 태그와 abbr 태그, title 속성을 이용함으로써, 단어의 설명과 약어의 설명문을 정의할 수 있다. (abbr 태그에 대해서는 에서 소개하고 있다) ... HTML초보자프로그래밍 공부 일기 HTML로 약어, 이름, 주소를 작성하는 방법 2020년 10월 4일<abbr> 는 약어 요소를 나타내는 것은 알고 있었지만, 그 이외의 주소나 이름의 표현을 몰랐기 때문에 이번에 정리한다. 약어는 <abbr> 속성(abbreviation)을 사용하여 나타낸다. 주로 title 태그와 함께 사용되어 abbr 태그로 둘러싸인 부분이 약어임을 나타낸다. abbr 태그로 둘러싸인 곳에 커서를 맞추면 title 태그로 입력한 것이 표시된다. (... HTML초보자프로그래밍 공부 일기